<template >
  <p @click="toggleFullscreen">{{ dayTime }}
    <img v-if="srcimage" style="height: 0.7vw;width: 0.7vw;margin-left:0.5vw " src="/images/qp.png"/>
    <img v-if="!srcimage" style="height: 0.9vw;width: 0.9vw;margin-left:0.5vw " src="/images/sx.png"/>
  </p>
</template>
<script>
export default {
  name: 'DayTime',
  data () {
    return {
      dayTime: '',
      srcimage: '/images/qp.png'
    }
  },
  methods: {
    getDayTime () {
      this.dayTime = this.$utils.formatDate(new Date())
    },
    toggleFullscreen () {
      const doc = window.document
      const docEl = doc.documentElement
      const requestFullScreen = docEl.requestFullscreen || docEl.mozRequestFullScreen || docEl.webkitRequestFullScreen || docEl.msRequestFullscreen
      const exitFullScreen = doc.exitFullscreen || doc.mozCancelFullScreen || doc.webkitExitFullscreen || doc.msExitFullscreen
      if (!doc.fullscreenElement && !doc.mozFullScreenElement && !doc.webkitFullscreenElement && !doc.msFullscreenElement) {
        requestFullScreen.call(docEl)
        this.srcimage = false
      } else {
        exitFullScreen.call(doc)
        this.srcimage = true
      }
    }
  },
  created () {
    this.getDayTime()
  },
  mounted () {
    setInterval(this.getDayTime, 1000)
  }
}
</script>
